<template>
	<div class="alarm-model-control">
		<!-- 弹窗主体 -->
		<div class="model-content">
			<!-- 头部 -->
			<div class="model-top">
				<span>视频监控</span>
			</div>
			<!-- 视频主体 -->
			<!-- 视频头部 -->
			<div class="video">
				<div class="model-video-top">
					<div class="top-left">
						<div class="monitor">{{monitorObj.name}}</div>
						<span class="id">id:{{monitorObj.id}}</span>
					</div>
					<div class="top-right">
						<img src="../../static/img/marker.png" alt="">
						<span>{{monitorObj.addressDesc}}</span>
					</div>
				</div>
				<!-- 视频主体 -->
				<div class="monitor-video">
					<div class="video-top">
						<template v-if="cotrollShow">

							<div class="content-left">

								<div class="video-container" id="video-container">

								</div>

							</div>
							<!-- 右边联动控制 -->
							<div class="content-right">
								<div class="right-title">云台控制</div>
								<!-- 控制器板块 -->
								<div class="right-contorll">
									<div class="small-contorll"></div>
									<div class="contorll-button">
										<img src="../../static/img/video-control-bottom.png" class="bottom pointer" alt=""
											@mousedown="startCtrl('1')" @mouseup="stopCtrl('1')" />
										<img src="../../static/img/video-control-left.png" class="left pointer other" alt=""
											@mousedown="startCtrl('2')" @mouseup="stopCtrl('2')" />
										<img src="../../static/img/video-control-right.png" class="right pointer other" alt=""
											@mousedown="startCtrl('3')" @mouseup="stopCtrl('3')" />
										<img src="../../static/img/video-control-top.png" class="top pointer" alt=""
											@mousedown="startCtrl('0')" @mouseup="stopCtrl('0')" />
									</div>
								</div>
								<!-- 控制器说明 -->
								<div class="right-contorll-desc">
									<div>点击方向按钮</div>
									<div>可查看不同方向的监控视频</div>
								</div>
								<!-- 底部控制按钮 -->
								<div class="bottom-button">
									<!-- 对话按钮 -->
									<div class="button-all" @click="callcapture">
										<div class="speak button-item">
											<div class="small-button">
												<image :src="sperkPng" mode=""></image>
											</div>
										</div>
										<div class="item-text">点击对讲</div>
									</div>
									<!-- 截图按钮 -->
									<div class="button-all" @click='imgcapture'>
										<div class="button-item">
											<div class="small-button screenshot">
												<image src="../../static/jieping.png" mode=""></image>
											</div>
										</div>
										<div class="item-text">点击截图</div>
									</div>
									<!-- 录像按钮 -->
									<div class="button-all" @click="videocapture">
										<div class="button-item">
											<div class="small-button video">
												<image :src="videoPng" mode=""></image>
											</div>
										</div>
										<div class="item-text">点击录像</div>
									</div>
								</div>
							</div>
						</template>

						<template v-else>
							<div class="content-left">
								<div class="leftLoading">
									<image class="imgVideo" src="../../static/img/loadingVideo.png" mode=""></image>
								</div>
								<div class="video-container1" id="video-container1">
								</div>
							</div>
						</template>


					</div>

					<div class="connection-device">
						<div class="device-top">
							<image src="../../static/img/edit.png" mode="" class="light-img"></image>
							<span class="top-title">关联设备</span>
						</div>
						<div class="device-content">
							<div v-if="videoAlarmDevice.length>=1">
								<div class="content-item" v-for="item in videoAlarmDevice" :key="item.deviceId">
									<div class="device-name">
										<div class="name-type">{{item.deviceTypeName}}</div>
										<div class="name-id">{{item.deviceId}}</div>
									</div>
									<div class="device-type">
										<div class="type-status" :style="{'color':item.color}">
											{{item.text}}
										</div>
										<div class="type-title">
											设备状态
										</div>
									</div>
									<div class="alarm-info" @click='toShowInfo(item.deviceId)'>
										<div class="info" :style="{'color':item.color}">{{item.alarmReason}}</div>
										<div class="info-title">告警信息</div>
										<div class="tip" v-if="item.isShow">
											<div class="tip-top">
												<!-- <span>说明</span> -->
												<img src="../../static/img/close.png" class="close-png"
													@click.stop="closeStatisticShow(item.deviceId)" alt="">
											</div>
											<div class="tip-conent">
												告警信息:{{item.alarmReason}}
											</div>
										</div>
									</div>
									<div class="alarm-time">
										<div class="time">{{item.alarmTime}}</div>
										<div class="time-title">告警时间</div>
									</div>
								</div>
							</div>
							<div class="no-device" v-else>
								<img src="../../static/img/no-alarm.png" alt="">
							</div>
						</div>

					</div>
				</div>

			</div>
			<!-- 关闭按钮 -->
			<image src="../../static/img/close.png" mode="" class="close-png pointer" @tap="closeModel"></image>
		</div>
	</div>
</template>

<script>
	var player = null
	import videoApi from "../../api/video-api.js"
	import EZUIKit from 'ezuikit-js';
	import ChimeePlayer from 'chimee-player';
	export default {
		props: {
			videoId: {
				type: Number,
				default: 0
			},
			deptId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				cotrollShow: true,
				videoPng: require("../../static/luxiang.png"),
				sperkPng: require("../../static/duijiang.png"),
				monitorObj: {},
				videoAlarmDevice: [],
				statictisShow: true
			}
		},
		mounted() {

			this.$api.getAlarmLog({
				system: '',
				status: '',
				deptId: this.deptId,
				pageSize: 10,
				pageNum: 1,
				isDept: 0,
				confirm: 0,
				videoId: this.videoId,
				beginAlarmTime: '',
				endAlarmTime: ''
			}).then(res => {
				res.data.list.forEach((v, index) => {
					v.isShow = false
					if (v.status === 1) {
						v.text = "报警"
						v.color = 'rgba(255, 61, 61, 1)'

					} else if (v.status === 2) {
						v.text = '正常'


					} else if (v.status === 4) {
						v.text = '离线'
						v.color = 'rgba(203, 206, 220, 1)'

					} else {
						v.text = '故障'
						v.color = 'rgba(254, 169, 64, 1)'

					}


				})
				this.videoAlarmDevice = res.data.list
				console.log(this.videoAlarmDevice, '视频数据')
			})
			videoApi.getTalkVideo({
				videoId: this.videoId
			}).then(res => {
				this.platformType = res.data.platformType
				if (res.data.platformType === 1) {
					this.cotrollShow = true
				} else {
					this.cotrollShow = false
				}
				this.$nextTick(function(){
					if(this.cotrollShow){
						this.initVideoHls(res.data)
					}else{
						this.initVideo(res.data)
					}
				})

			})
			this.$api.getMonitorLocation({
				id: this.videoId

			}).then(res => {
				this.monitorObj = res.data
			})
		},
		methods: {
			//开启录屏方案
			videocapture() {
				//录像方案
				if (player) {
					this.isRec = !this.isRec;
					if (this.isRec) {
						this.videoPng = require("../../static/luxiang2.png");
						player.startSave();
					} else {
						this.videoPng = require("../../static/luxiang.png");
						player.stopSave();
					}
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持录像",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启语音方案
			callcapture() {
				//语音方案
				if (player) {
					this.istalk = !this.istalk;

					if (this.istalk) {
						this.sperkPng = require("../../static/duijiang2.png");

						console.trace();
						player.startTalk();
					} else {
						this.sperkPng = require("../../static/duijiang.png");
						player.stopTalk();
					}
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持对讲",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启截图方案
			imgcapture() {
				//截图方案
				if (player) {
					player.capturePicture();
				} else {
					this.$notify({
						title: "提示",
						message: "当前视频设备不支持截图",
						type: "warning",
						customClass: "warning"
					});
				}
			},
			//开启手动控制
			startCtrl(dir) {
				videoApi.handleVideo({
					videoId: this.videoId,
					direction: dir,
					speed: 1
				}).then((res) => {
					console.log(res);
				});
			},
			stopCtrl(dir) {
				//停止操控
				videoApi.stophandleVideo({
					videoId: this.videoId,
					direction: dir,
					speed: 1
				}).then((res) => {
					console.log(res);
				});
			},
			closeModel() {
				this.$emit('closeVideoControlModel', false)
			},
			initVideoHls(data) {
				var el = document.getElementById('video-container')
				el.innerHTML = ''
				player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					accessToken: data.token,
					url: data.url,
					template: "standard", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
					// 视频上方头部控件
					// header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
					// footer: [],
					// height: 500,
					width:el.offsetWidth,
					controls: true
				})
			},
			//普通视屏容器
			initVideo(data) {
				var el = document.getElementById('video-container1')
				el.innerHTML = ''
				player = new ChimeePlayer({
					wrapper: '#video-container1', // video dom容器
					src: data.url,
					box: data.url && data.url.slice(-3) === 'flv' ? 'flv' : 'hls',
					isLive: true,
					playsInline: true,
					autoplay: true,
				})
			},
			toShowInfo(id) {
				console.log(id)
				this.videoAlarmDevice.forEach(v => {
					if (v.deviceId === id) {
						v.isShow = true
					}
				})
			},
			closeStatisticShow(id) {
				console.log(id)
				this.videoAlarmDevice.forEach(v => {
					if (v.deviceId === id) {
						v.isShow = false
					}
				})
			}
		},
		beforeDestroy() {
			console.log('abaaaa')
			console.log(player)
			if (this.platformType === 1) {
				// if(player){
				// 	player.stop()
				// }
			} else {
				if(player){
					player.stopLoad()
				}
			}
			player=null
		}
	}
</script>

<style lang="scss" scoped>
	.alarm-model-control {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		overflow-y: auto;
		z-index: 1000;

		.model-content {
			position: absolute;
			left: 50%;
			top: 5%;
			transform: translate(-50%, 0);
			width: 1200px;
			height: 862px;
			background: rgba(1, 25, 46, 1);
			z-index: 3;

			.model-top {
				color: rgba(2, 195, 255, 1);
				height: 70px;
				text-align: center;
				line-height: 70px;
				font-size: 18px;
				border-bottom: 1px solid rgba(26, 207, 255, 0.1);
				margin-bottom: 10px;
			}

			.video {

				width: 100%;

				
				.model-video-top {
					margin: 0 auto;
					width: 90%;
					height: 65px;
					background-color: rgba(27, 165, 255, 0.0800);
					display: flex;
					justify-content: space-between;
					align-items: center;

					.top-left {
						display: flex;
						align-items: center;

						.monitor {
							margin-left: 20px;
							color: rgba(2, 195, 255, 1);
							font-size: 18px;

						}

						.id {
							margin-left: 10px;
							color: #fff;
							font-size: 14px;
						}
					}

					.top-right {
						display: flex;
						align-items: center;
						color: #fff;
						font-size: 14px;
						margin-right: 20px;
					}
				}

				//视屏报警主体
				.monitor-video {
					width: 90%;
					height: 670px;
					margin: 10px auto 20px;

					.video-top {
						width: 100%;
						display: flex;
						min-height: 550px;
						position: relative;
						//普通视频
						.video-container1{
							width: 100%;
							padding: 0 100px;
						}
						.leftLoading{
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							z-index: 0;
							.imgVideo{
								width: 83px;
								height: 83px;
								animation:leftLoading linear 3s infinite;
							}
						}
						@keyframes leftLoading {
							0% {
								transform: rotateZ(0deg);
							}
							100% {
								transform: rotateZ(360deg);
							}
						}
						//萤石云视频
						.content-left {
							flex: 7;
							display: flex;
							justify-content: center;
							.video-container {
								width: 100%;
								height: 550px;
								::v-deep .iframe-btn-container {
									width: 0px ;
									position: relative;
								}
								
							}
						}

						.content-right {
							flex: 3;
							display: flex;
							flex-direction: column;
							align-items: center;

							.right-title {
								color: #fff;
								font-size: 16px;
								padding-top: 75px;
								text-align: center;
							}

							.right-contorll {
								margin: 50px 40px 0 40px;
								background-color: rgba(0, 62, 112, 0.2);
								width: 180px;
								height: 180px;
								border-radius: 180px;
								display: flex;
								align-items: center;
								justify-content: center;
								position: relative;

								.small-contorll {
									width: 100px;
									height: 100px;
									border-radius: 100px;
									background: rgba(1, 24, 46, 0.7);
								}

								.contorll-button {
									img {
										width: 19px;
										height: 14px;
										position: absolute;
									}
									.other{
										width: 14px;
										height: 19px;
									}

									.top {
										top: 10px;
										left: 50%;
										transform: translate(-50%, 0);
									}

									.right {
										top: 50%;
										right: 10px;
										transform: translate(0, -50%);
									}

									.bottom {
										left: 50%;
										bottom: 10px;
										transform: translate(-50%, 0);
									}

									.left {
										left: 10px;
										top: 50%;
										transform: translate(0, -50%);
									}
								}
							}

							.right-contorll-desc {
								margin-top: 10px;
								flex-direction: column;
								color: #fff;
								font-size: 12px;
								display: flex;
								align-items: center;

								div {
									margin-bottom: 10px;
								}
							}

							.bottom-button {
								padding: 0 20px;
								width: 100%;
								display: flex;
								justify-content: space-around;
								margin-top: 20px;

								.button-all {
									display: flex;
									align-items: center;
									flex-direction: column;

									.item-text {
										margin-top: 5px;
										color: #fff;
										font-size: 12px;
									}
								}

								.button-item {
									width: 60px;
									height: 60px;
									border-radius: 127px;
									display: flex;
									align-items: center;
									justify-content: center;
									background: linear-gradient(180deg,
											rgba(52, 213, 249, 0.08) 0%,
											rgba(93, 190, 252, 0.07) 100%);

									.small-button {
										width: 40px;
										height: 40px;
										border-radius: 88px;
										display: flex;
										justify-content: center;
										align-items: center;
										background: rgba(52, 213, 249, 0.15);

										background-size: cover;

										image {
											width: 30px;
											height: 30px;
										}
									}
								}
							}
						}
					}


					.video-bottom {
						margin-top: 50px;
						display: flex;
						justify-content: center;

						.bottom-btns {
							color: rgba(255, 61, 61, 1);
							font-size: 14px;
							width: 50%;
							height: 36px;

							display: flex;

							.btn-item {
								background-color: rgba(255, 61, 61, 0.2000);
								display: flex;
								justify-content: center;
								align-items: center;
								width: 120px;
								height: 36px;
								margin-right: 20px;

								image {
									width: 20px;
									height: 20px;
									margin-right: 5px;
								}
							}

							.yellow {
								background-color: rgba(254, 169, 64, 0.1);
								color: rgba(254, 169, 64, 1);
								border: 1px solid #FEA940;
							}

							.blue {
								background-color: rgba(51, 193, 216, 0.1000);
								color: rgba(51, 193, 216, 1);
								border: 1px solid #02C3FF;
							}
						}
					}

				}


			}

			.connection-device {
				.device-top {
					margin: 10px 20px;
					padding-bottom: 11px;
					border-bottom: 1px solid #1BCEFF;
					color: #fff;

					image {
						width: 5px;
						height: 12px;
					}

					span {
						margin-left: 6px;
						font-size: 16px;
					}
				}
				.device-content{
					padding:0 20px;
					height: 80px;
					overflow: auto;
					.no-device{
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						img{
							width: 80px;
							height: 52px;
						}
					}
					.content-item{
						height: 80px;
						background-color: rgba(27, 165, 255, 0.0800);
						display: flex;
						align-items: center;
						padding: 0 20px;

						.device-name {
							flex: 5;

							.name-type {

								font-size: 14px;
								color: rgba(255, 255, 255, 0.9);
							}

							.name-id {
								margin-top: 5px;
								font-size: 12px;
								color: rgba(255, 255, 255, 0.6);
							}
						}

						.device-type {
							flex: 2;

							.type-status {
								font-size: 14px;
							}

							.type-title {
								margin-top: 5px;
								color: rgba(255, 255, 255, 0.6);
								font-size: 12px;
							}
						}

						.alarm-info {
							width: 50%;
							position: relative;

							.info {
								font-size: 14px;
								width: 95%;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								height: 20px;
							}

							.info-title {
								margin-top: 5px;
								font-size: 12px;
								color: rgba(255, 255, 255, 0.6);
							}

							.tip {
								background-color: rgba(65, 60, 43, 0.8000);

								.tip-top {
									justify-content: space-between;
									display: flex;
									color: rgba(254, 169, 64, 1);

									.close-png {
										top: 5px;
										right: 5px;
										position: absolute;
										width: 12px;
										height: 12px;
									}
								}

								z-index: 5;
								color: #fff;
								top:0px;
								left: 10%;
								position: absolute;
								z-index: 3000;
								padding: 10px 20px;
								border-radius: 6px;
								border: 1px solid rgba(245, 166, 35, 0.5);
								.tip-content {
									font-size: 16px;
								}
							}
						}

						.alarm-time {
							flex: 3;

							.time {
								color: rgba(255, 255, 255, 0.9);
								font-size: 14px;
							}

							.time-title {
								margin-top: 5px;
								color: rgba(255, 255, 255, 0.6);
								font-size: 12px;
							}
						}
					}
				}
			}

		}

		.close-png {
			position: absolute;
			width: 17px;
			height: 19px;
			right: 18px;
			top: 22px;
			z-index: 4;
		}
	}
	
</style>